// pages/songDetail/songDetail.js
import request from '../../../utils/request'
// 获取全局实例
const appInstance = getApp()
import PubSub from 'pubsub-js'
import moment from 'moment'

Page({
  /**
   * 页面的初始数据
   */
  data: {
    isPlay: false, // 音乐是否播放
    musicInfo: {}, //音乐信息
    musicId: 0, //音乐id
    musicLink: '', // 音乐的连接
    currentTime: '00:00', // 实时时间
    durationTime: '00:00', // 总时长
    currentWidth: 0, // 实时进度条的宽度
  },

  /**
   * 生命周期函数--监听页面加载
   */

  onLoad: function (options) {
    // options 用于接收路由跳转的query参数
    // 原生小程序路由传参，对参数的长度有限制，如果参数长度过长会自动截取掉
    // 获取音乐详情
    this.getMusicInfo(options.ids)
    this.setData({
      musicId: options.ids >>> 0,
    })
    /* 
    问题:如果用户操作系统的控制音乐播放/暂停的按钮，页面不知道，
    导致页面显示是否播放的状态和真是的音乐播放状态不一致，
    解决方案：
    1. 通过控制音频的实例去监视音乐的播放/暂停
    */
    // 判断当前页面的音乐是否在播放

    if (
      appInstance.globalData.isMusicPlay &&
      appInstance.globalData.musicId === options.ids >>> 0
    ) {
      this.setData({
        isPlay: true,
      })
    }
    // 创建控制音乐播放的实例
    this.BackgroundAudioManager = wx.getBackgroundAudioManager()
    //监听背景音频暂停事件
    this.BackgroundAudioManager.onPause(() => {
      this.changePlayState(false)
    })
    //监听背景音频播放事件
    this.BackgroundAudioManager.onPlay(() => {
      this.changePlayState(true)
      appInstance.globalData.musicId = this.data.musicInfo.id
    })
    //监听背景音频停止播放事件
    this.BackgroundAudioManager.onStop(() => {
      this.changePlayState(false)
    })
    //监听背景音频播放进度更新事件
    this.BackgroundAudioManager.onTimeUpdate(() => {
      let currentTime = moment(
        this.BackgroundAudioManager.currentTime * 1000
      ).format('mm:ss')
      let currentWidth =
        (this.BackgroundAudioManager.currentTime /
          this.BackgroundAudioManager.duration) *
        450
      this.setData({
        currentTime,
        currentWidth,
      })
    })
    //监听背景音频自然播放结束事件
    this.BackgroundAudioManager.onEnded(() => {
      this.setData({
        currentWidth: 0,
        currentTime: '00:00',
      })
      this.handleSwitchMusic('next')
    })
  },
  // 修改播放状态的功能函数
  changePlayState(isPlay) {
    this.setData({
      isPlay,
    })
    // 修改全局音乐播放的状态
    appInstance.globalData.isMusicPlay = isPlay
  },
  // 点击播放暂停的回调
  handlePlay() {
    let { isPlay, musicId, musicLink } = this.data
    isPlay = !isPlay

    this.musicControl(isPlay, musicId, musicLink)
  },
  // 获取音乐信息的回调
  async getMusicInfo(ids) {
    const { songs } = await request('/song/detail', {
      // songs[0].dt 单位ms
      ids,
    })
    let durationTime = moment(songs[0].dt).format('mm:ss')
    this.setData({
      musicInfo: songs[0],
      musicId: songs[0].id,
      durationTime,
    })
    // 动态修改窗口的标题
    wx.setNavigationBarTitle({
      title: songs[0].name,
    })
    // if (appInstance.globalData.isMusicPlay) {
    //   this.musicControl(true)
    // }
  },
  // 控制音乐播放/暂停的功能函数
  async musicControl(isPlay, musicId, musicLink) {
    if (isPlay) {
      //音乐播放
      // 获取音乐的播放连接
      if (!musicLink) {
        let { data } = await request('/song/url', {
          id: musicId,
        })
        musicLink = data[0].url
        this.setData({
          musicLink,
        })
      }
      // 创建控制音乐播放的实例
      this.BackgroundAudioManager.src = musicLink
      this.BackgroundAudioManager.title = this.data.musicInfo.name
    } else {
      //暂停我们的音乐
      this.BackgroundAudioManager.pause()
    }
  },
  // 点击切歌的回调
  handleSwitchMusic(e) {
    // let currentIndex = appInstance.globalData.musicList.findIndex(
    //   item => item === this.data.musicId
    // )
    // 获取切歌的类型
    let type = e.currentTarget ? e.currentTarget.id : e
    // 关闭当前播放的音乐
    this.BackgroundAudioManager.stop()
    PubSub.subscribe('musicId', (_, musicId) => {
      this.getMusicInfo(musicId)
      // 自动播放当前的音乐
      this.musicControl(true, musicId)
      // 取消订阅
      PubSub.unsubscribe('musicId')
    })

    PubSub.publish('switchType', type)

    // if (type === 'pre') {
    //   if (currentIndex === 0) return
    //   this.getMusicInfo(appInstance.globalData.musicList[currentIndex - 1])
    // } else if (type === 'next') {
    //   //切换到下一首
    //   if (currentIndex === appInstance.globalData.musicList.length - 1) return
    //   this.getMusicInfo(appInstance.globalData.musicList[currentIndex + 1])
    // } else {
    //   let random = parseInt(
    //     Math.random() * appInstance.globalData.musicList.length
    //   )
    //   this.getMusicInfo(appInstance.globalData.musicList[random])
    // }
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
})
